<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<style>
		body.white,
		body.white .mui-content {
		  background-color: #FFF;
		}
		.order-status{
			height: 43px;
			line-height: 43px;
			padding:0 10px;
			background: #f6f6f6;
			border-bottom: 1px solid #c4c4c4;
		}
		.order-status .mui-pull-right{
			color: #f53048;
			font-size: 18.62px;
		}
		.order-status .mui-pull-left{
			color: #666;
			font-size: 15px;
		}
		.mui-navigate-right:after, .mui-push-right:after{
			color: #999;
		}
		.mui-table-view-cell:after{
			background-color: #ededed;
		}
		.mui-table-view .mui-media-body{
			color: #333;
			font-size: 15px;
		}
		p.mui-ellipsis{
			font-size: 12px;
			color: #666;
		}
	</style>
</head>
<body class="white">
	<div class="mui-content">
		<div class="mui-clearfix order-status">
			<div class="mui-pull-right"><span class="text-red" id="money"></span></div>
			<div class="mui-pull-left">订单总额：</div>
		</div>	 
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-media" data-type="wxpay">
		        <a href="javascript:;" class="mui-navigate-right">
		            <img class="mui-media-object mui-pull-left" src="../icon/wechat-pay.png">
		            <div class="mui-media-body">
		                微信支付
		                <p class="mui-ellipsis">微信安全支付</p>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media" data-type="alipay">
		        <a href="javascript:;" class="mui-navigate-right">
		            <img class="mui-media-object mui-pull-left" src="../icon/zifu-pay.png">
		            <div class="mui-media-body">
		                支付宝支付
		                <p class="mui-ellipsis">支付宝安全支付</p>
		            </div>
		        </a>
		    </li>
		    <!--<li class="mui-table-view-cell mui-media">
		        <a href="javascript:;" class="mui-navigate-right">
		            <img class="mui-media-object mui-pull-left" src="../icon/yin-pai.png">
		            <div class="mui-media-body">
		            		<div class="mui-pull-right" style="margin:4px 8px 0 0;"><img src="../icon/pay1.png" width="88.5px" alt="" /></div>
		                银联支付
		                <p class="mui-ellipsis">银联快捷支付</p>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;" class="mui-navigate-right">
		            <img class="mui-media-object mui-pull-left" src="../icon/apple-pay.png">
		            <div class="mui-media-body">
		            		<div class="mui-pull-right" style="margin:4px 8px 0 0;"><img src="../icon/pay1.png" width="88.5px" alt="" /></div>
		                Apple Pay支付
		                <p class="mui-ellipsis">Apple专属 安全支付</p>
		            </div>
		        </a>
		    </li>-->
		</ul>
		
	</div>
	<script src="../js/mui.js"></script>
	<script src="../js/bexta.js"></script>
	<script type="text/javascript">
		var order, money;
		mui.init()
		mui.plusReady(function () {
		    var views = bexta.getWebview();
		    order = views.data.order_no;
		    money = views.data.order_amount;
		    document.querySelector('#money').innerHTML = "¥ " + money;
//		    mui('body').on('tap', 'li', function(){
////		    		mui.toast('支付成功'); 
//		    		bexta.ajax(api.update_pay, function(res, msg){
//		    			mui.alert(msg, TITLE, "确定", function(){
//		    				bexta.goWebview(function(){
//		    					mui.fire(plus.webview.getLaunchWebview(), 'toggleClick', {
//		    						path:'center'
//		    					});
//		    				});
//		    			});
//		    		}, {data:{order_no:order}});
//		    });
			var pays = {};
			plus.payment.getChannels(function(channels){
				for( var i in channels ){
					pays[channels[i].id] = channels[i];
				}
			});
			function go(){
				bexta.goWebview(function(){
    					mui.fire(plus.webview.getLaunchWebview(), 'toggleClick', {
    						path:'center'
    					});
    				});
			}
			mui('.mui-table-view').on('tap', '.mui-table-view-cell', function(){
				
//				mui.alert("仅限内部会员使用，付款不成功");
//				return ;
//				
				var type = this.getAttribute('data-type');
				var ourl = '';
				if( type == 'alipay' ){
					ourl = api.getzhifubaoinfo;
				}else if(type == 'wxpay'){
					ourl = api.getweixininfor;
				}else{
					mui.toast("请选择正确的支付方式");
					return;
				}
				bexta.ajax(ourl, function(res){
					if( res ){ 
						plus.payment.request(pays[type], res, function(result){
								mui.toast("支付成功");
								mui.alert("请在启租日期前付清尾款，以免耽误出货影响拍摄。");
								setTimeout(function(){ 
									go()
								},1000); 
						}, function(e){
							console.log( bexta.jsonToString(e) );
							mui.toast("支付失败");
						})
					}
				}, {data:{order_no:views.data.order_no}});
			});
		});
	</script>
</body>
</html>